<template>
	<view>
		<view class="flex-col page">
			<!-- 标题 -->
			<u-navbar :is-back="false" :background="background" title="绑定wifi" title-color="#000000" title-size="36"
				:title-bold="true"></u-navbar>
			<view class="form flex-col items-center">

				<!-- 表单内容 -->
				<!-- <view class="flex-col items-center"> -->
				<view class="flex-col group_3">
					<text class="self-start font_3 text_3">WIFI</text>
					<view class="flex-row justify-between items-center  text-wrapper_3 mt-9-5" @click="selectWifi">
						<!-- <input placeholder="请选择WI-FI号码" class="nickname-input" placeholder-class="nickname-placeholder"
							v-model="wifiAccount" /> -->
						<text class=" pd-lf-45" :class="wifiName == '' ? 'nickname-placeholder' : 'nickname-input'">{{wifiName == '' ? '请选择WI-FI号码' : wifiName}}</text>
						<image src="/static/add_child_piker_arrow_down.png" class="image_8" mode=""></image>
						<u-picker mode="selector" v-model="wifiSelectorShow" :default-selector="[0]" :range="wifiSelector" range-key="name" @confirm="confirmWifi"></u-picker>
						<!-- <u-picker mode="time" v-model="birthShow" :params="params"
								@confirm="confirmBirth"></u-picker> -->
					</view>
				</view>
				<view class="flex-col group_3">
					<text class="self-start font_3 text_3">密码</text>
					<view class="flex-col justify-center items-start  text-wrapper_3 mt-9-5">
						<input placeholder="请输入密码" class="nickname-input" placeholder-class="nickname-placeholder"
							v-model="password" />
					</view>
				</view>


				<!-- </view> -->

			</view>
			<view @click="openBindPop" class="flex-col justify-start items-center button text-wrapper_4">
				<text class="font_4 text_9">确定</text>
			</view>
		</view>
		<u-popup v-model="bindShow" mode="center" :custom-style="popupStyle" :mask-close-able="false" :mask-custom-style="maskCustomStyle">
			<view class="popup">
				<view class="popup-content flex-col items-center">
					<image class="popup-top-img" src="/static/bind_pop_top_bg.png" mode=""></image>
					<text class="popup-text">请扫码绑定我</text>
					<image class="popup-code-img" src="/static/bind_pop_code.png" mode=""></image>
					<view class="popup-button">立即绑定</view>
				</view>
				
				<view class="popup-close flex-row justify-center">
					<image @click="closeBindPop" class="popup-close-img" src="../../../static/bind_pop_close_icon.png" mode=""></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				popupStyle: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 0.8)'
				},
				wifiAccount: '',
				username: '',
				password: '',
				birthShow: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				wifiName: '',
				bindShow: false,
				wifiSelectorShow: false,
				wifiSelector: [
					{
						name: '111',
						id: 1
					},
					{
						name: '222',
						id: 2
					},
					{
						name: '333',
						id: 3
					}
				],
				
			}
		},

		onShow() {

		},
		methods: {
			selectWifi() {
				this.wifiSelectorShow = true
			},
			confirmWifi(e) {
				console.log(e, 'eeeeee')
				let index = e[0]
				this.wifiName = this.wifiSelector[index].name
			},
			openBindPop(){
				this.bindShow = true
			},
			closeBindPop(){
				this.bindShow = false
			}
		}
	}
</script>

<style lang="less">
	@import url('../../../common/css/common.css');
	/deep/ .u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}
	page {
		background-color: #f6f8fe;
	}
	.pd-lf-45 {
		padding-left: 45rpx;
	}

	.mt-95-5 {
		margin-top: 191rpx;
	}

	.mt-9-5 {
		margin-top: 19rpx;
	}

	.mt-4-5 {
		margin-top: 9rpx;
	}

	.mt-49 {
		margin-top: 98rpx;
	}

	.page {
		padding-bottom: 39rpx;
		/* background-color: #ffffff; */
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		background-image: url(../../../static/add_child_top_bg.png);
		background-size: 100% 320rpx;
		background-repeat: no-repeat;
	}

	.group {
		padding-bottom: 7rpx;
		width: 650rpx;
		margin: 0 auto;
		margin-top: 28rpx;
	}

	.form {
		margin-top: 106rpx;
	}
	.nickname-input {
		text-align: start;
		padding-left: 48rpx;
	}

	.text {
		margin-right: 75rpx;
		color: #000000;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34rpx;
	}


	.font {
		font-size: 60rpx;
		font-family: PingFang SC;
		line-height: 56rpx;
		font-weight: 500;
		color: #171832;
	}

	.group_3 {
		margin-top: 26rpx;
		width: 654rpx;
	}

	.font_3 {
		// font-size: 26rpx;
		// font-family: PingFang SC;
		// line-height: 25rpx;
		// font-weight: 500;
		// color: #616274;
		font-weight: 600;
		font-size: 32rpx;
		color: #151515;
	}

	.text_3 {
		margin-left: 17rpx;
	}

	.font_4 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 28rpx;
		font-weight: 500;
		color: #171832;
		
		
	}

	.text-wrapper_3 {
		padding: 34rpx 0;
		border-radius: 48rpx;
		width: 651rpx;
		height: 99rpx;
		background: #fff;
		padding-right: 45rpx;
	}

	.button {
		margin: 0 28rpx;
	}

	.text-wrapper_4 {
		position: fixed;
		bottom: 118rpx;
		width: 693rpx;
		padding: 32rpx 0;
		border-radius: 44rpx;
		background: linear-gradient(-90deg, #b8e2ff, #bfbdff);
		/* background-image: url('https://ide.code.fun/api/image?token=669493cab8c7cd0011a5d042&name=7b25aaee48ad626d06f87f71558b7c8f.png'); */
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-top: 171rpx;
	}

	.text_9 {
		color: #151515;
		line-height: 29rpx;
	}
	.nickname-placeholder {
		font-weight: 400;
		opacity: 0.7;
		font-size: 30rpx;
		color: #616274;
		opacity: 0.7;
	}
	.image_8 {
		width: 17rpx;
		height: 11rpx;
		// padding-right: 45rpx;
	}
	
	
	/* 弹窗 */
	.popup {
		width: 575rpx;
		// height: 803rpx;
	}
	.popup-top-img {
		width: 100%;
		height: 316rpx;
	}
	.popup-content {
		background: #f5f8ff;
		border-radius: 36rpx;
	}
	.popup-text {
		font-size: 36rpx;
		color: #171832;
		font-family: PingFang SC;
		margin: 36rpx 0;
	}
	.popup-code-img {
		width: 211rpx;
		height: 211rpx;
	}
	.popup-button {
		width: 245rpx;
		height: 78rpx;
		background-image: url('../../../static/bind_pop_button_bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-top: 30rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #171832;
		text-align: center;
		line-height: 78rpx;
		margin-bottom: 63rpx;
		
	}
	.popup-close {
		margin-top: 108rpx;
	}
	.popup-close-img {
		width: 63rpx;
		height: 63rpx;
	}
</style>